<template>
    <div class="container">
        <div class="row">
            <el-container style="height: 100%;margin: 0px;padding: 0px;">
                <!-- 头部 -->
                <el-header class="header" style="background-color: aliceblue;margin: 0px;padding: 0px;">
                    <div style="display: flex;width: 100%;">
                        <img style="width: 3%;height: 70%;" src="../../assets/img/administration/6.png" alt="">
                        <div style="width: 5%;height: 1%;margin-top: 0.6%;margin">合同记录</div>
                    </div>
                    <!-- 获取文件 -->
                    <div>
                        <!-- <input type="file" @change="onFileChange">
                        <el-button type="primary" @click="uploadFile">上传</el-button>
                        <el-button type="primary" @click="downloadFile">下载</el-button> -->
                        <!-- <el-link type="primary" v-if="fileLink" :href="fileLink" target="_blank" rel="noopener noreferrer">点击下载文件</el-link> -->
                    </div>

                    <div style="display:flex;">
                        <el-button @click="addContractClause();dialogvisible = true" type="primary">创建合同记录</el-button>
                    </div>

                    <div>

                    </div>
                </el-header>

                <el-container>
                    <el-container>
                        <!-- 内容 -->
                        <el-main style="padding: 0px;">
                            <div style="background-color: white;width: 100%;height: 5%;display: flex;justify-content: end;border: 1px solid black">
                               <input id="seainp" suffix-icon="" v-model="select" placeholder="请输入负责人" style="width: 30%;height: 83%;margin-left: 10px;"></input>
                               <button style="border: 2px solid black;height: 100%;text-align: center;padding: 0px;" @click="search()">搜索</button>
                               <button style="border: 2px solid black;height: 100%;text-align: center;padding: 0px;" @click="del()">重置</button>
                            </div>
                            <div style="width: 100%;height: 700px; border: 1px solid black;overflow: hidden;">
                                <el-table :data="newtable" stripe style="width: 100%;" @selection-change="handChange">
                                    <el-table-column type="selection" fixed="left" :selectable="checkSelectable" />
                                    <el-table-column prop="contractPortalId" label="合同id" width="100"></el-table-column>
                                    <el-table-column prop="contractName" label="合同名称" width="400" style="margin-left:"></el-table-column>
                                    <el-table-column prop="contractNumber" label="合同编号" width="400"></el-table-column>
                                    <el-table-column prop="personInCharge" label="负责人"></el-table-column>
                                    <el-table-column prop="customerName" label="客户名称"></el-table-column>
                                    <el-table-column prop="founder" label="创建日期"></el-table-column>
                                    <el-table-column prop="contractPrice" label="合同金额"></el-table-column>
                                    <el-table-column prop="contractStatus" label="合同状态"></el-table-column>
                                    <el-table-column prop="status" label="操作">
                                        <template slot-scope="scope">
                                            <el-button type="danger" icon="el-icon-delete" @click="delContract()" circle></el-button>
                                        </template>

                                    </el-table-column>
                                </el-table>
                            </div>
                            <el-dialog title="提示" :visible.sync="dialogvisible" width="30%" :before-close="handleClose">
                                <div style="display: flex;">
                                    获取到的客户名：
                                    <div v-for="(item,index) in clientUserName" key="index" style="margin-left: 10px;">
                                    {{item}}
                                </div>
                                </div>
                                <el-input v-model="contract.ContractName" placeholder="合同名称"></el-input>
                                <el-input v-model="contract.ContractNumber" placeholder="合同编号"></el-input>
                                <el-input v-model="contract.CustomerName" placeholder="客户名称"></el-input>
                                <el-input v-model="contract.ContractPrice" placeholder="合同金额"></el-input>
                                <el-input v-model="contract.stat" placeholder="合同状态" ></el-input>
                                <span slot="footer" class="dialog-footer">
                                    <el-button @click="dialogvisible = false">取 消</el-button>
                                    <el-button type="primary" @click="queding();dialogvisible = false">确 定</el-button>
                                </span>
                            </el-dialog>

                            <el-dialog title="提示" :visible.sync="updatecate" width="30%" :before-close="handleClose">

                                <span>合同</span>

                                <el-input v-model="input" placeholder="合同名称"></el-input>
                                <el-input v-model="input" placeholder="合同编号"></el-input>
                                <el-input v-model="input" placeholder="创建日期"></el-input>
                                <el-input v-model="input" placeholder="客户名称"></el-input>
                                <el-input v-model="input" placeholder="负责人"></el-input>
                                <el-input v-model="input" placeholder="合同金额"></el-input>
                                <el-input v-model="contract.stat" placeholder="合同状态" ></el-input>
                                <span slot="footer" class="dialog-footer">
                                    <el-button @click="updatecate = false">取 消</el-button>
                                    <el-button type="primary" @click="updatecate = false">确 定</el-button>
                                </span>
                            </el-dialog>
                        </el-main>
                        <!-- 底部 -->
                        <el-footer style="background-color: white;height: 5%;display: flex;justify-content: flex-end;">
                            <el-pagination background
                                @size-change="handleSizeChange"
                                @current-change="handleCurrentChange"
                                :current-page="params.page"
                                :page-sizes="arr"

                                :page-size="params.size"
                                layout="total, sizes, prev, pager, next, jumper"
                                :total="count">
                            </el-pagination>
                        </el-footer>
                    </el-container>
                </el-container>
            </el-container>
            <!-- <img :src="imageSrc" alt="加载中" style="max-width: 300px; max-height: 300px">"> -->
        </div>
    </div>
</template>
<script>
import { selectContractAll,delListContract,fileupload,getClientUserName,addContract,getLimit,downloadFile,getAvatar } from '../../api/contract'
import { upload,download } from '../../utils/upload'
export default{
    data(){
        return{
            options:[
                {
                    value: '1',
                    label: '批量提交'
                },
                {
                    value: '2',
                    label: '批量共享'
                },
                {
                    value: '3',
                    label: '批量关注'
                },
                {
                    value: '4',
                    label: '批量转发'
                }
            ],
            value: '',
            dialogvisible: false,
            contract:
                {
                    ContractName: '',
                    ContractNumber: '',
                    PersonInCharge: '',
                    CustomerName: '',
                    ContractPrice: '',
                    stat: '已签约'
                }
            ,
            data: [
                {
                    label: '销售管理',
                    children:[
                        {
                            label: '新客户购买合同',
                        },
                        {
                            label: '新客户购买合同（展示协同区）',
                        },
                        {
                            label: '合同开票审批',
                        },
                        {
                            label: '合同变更流程'
                        },
                        {
                            label: '报价审批流程'
                        }
                    ]
                }
            ],
            tableData:[],
            newtable:[],
            select:'',
            updatecate: false,
            //默认每页几条size page-size，page当前页current-page
            params:{name: '',page:1,size:5},
            //总记录数
            count:10,
            //每页几条
            arr:[1,3,5,7,9,10],
            selectedRows: [],
            delid:[],
            selectedFile: null,
            clientUserName: [],
            pagee:'1',
            index:'',
            imageSrc: ''
        }
    },
    mounted() {
        this.selectContractAll();
        this.getAvatar();
     },
    methods:{
        //每页条数改变时触发
        handleSizeChange(val){
            //后台发请求，请求多少条
            console.log(`每页${val}条`)
            this.index = val
            this.getLimit()
        },
        //当前页改变时触发
        handleCurrentChange(val){
            //给后台发请求
            console.log(`当前页${val}`)
            this.pagee = val
            this.getLimit()
        },
        getLimit(){
            const data = {
                pagee: this.pagee,
                index: this.index
            }
            console.log("当前第几页："+data.pagee+"，每页显示几条："+data.index)
            getLimit(data).then(res => {
                this.tableData = res.result
                this.newtable = this.tableData
                console.log(res)
            })
        },
        //根据name进行搜索搜索
        search(){
            let sou = this.select
            this.newtable = []
            console.log('搜索功能'+sou)
            this.tableData.forEach(name => {
                if(sou == name.personInCharge){
                    console.log(name.name)
                    this.newtable.push(name)
                }else{
                    console.log('未找到')
                }
            });
            console.log(this.newtable)

        },
        //重置
        del(){
            this.newtable = this.tableData
        },
        addContractClause(){
            this.dialogvisible = true
            console.log("是否获取到")

            //获取销售已有客户名
            getClientUserName().then(res => {
                console.log("获取到的客户名"+res)
                this.clientUserName = res.result
                console.log("获取到的客户名"+this.clientUserName)
            })
        },
        queding(){
            let data = {
                ContractName: this.contract.ContractName,
                ContractNumber: this.contract.ContractNumber,
                CustomerName: this.contract.CustomerName,
                ContractPrice: this.contract.ContractPrice,
                ContractStatus: this.contract.stat

            }
            addContract(data).then(res => {
                console.log(res)
                this.selectContractAll();
            })
        },

        clickupdate(){
            this.updatecate = true
        },
        handChange(selection){
            this.selectedRows = selection;
        },
        // 批量删除
        delContract(){
            console.log(this.selectedRows);
            // this.delid = this.selectedRows.contractPortalId
            let datadel = new Set()
            this.selectedRows.forEach(item => {
                datadel.add(item.contractPortalId)
            });
            let ids = Array.from(datadel)
            console.log(ids)
            delListContract(ids).then(res => {
                if(res.code == 200){
                    console.log(res)
                    this.selectContractAll();
                }
            })

        },
        //获取合同记录数据
        selectContractAll(){
            selectContractAll().then(res => {
                if(res.code == 200){
                    this.tableData = res.result
                    this.newtable = this.tableData
                    // console.log(res.result)
                    console.log(this.newtable)
                }else{
                    console.log("错误")
                }
            })
        },
        //上传文件
        onFileChange(event){
            const dataFile = event.target.files[0];
            upload(dataFile);
          },
          //下载文件
        downloadFile(){
            let fileName = "上传：tmp.txt"
            download(fileName)
        },
        //获取头像
        getAvatar(){
            getAvatar().then(res => {
                console.log(res)
                this.imageSrc = res.message
            })
        }

    },

}
</script>
<style>
.container,.row{
    width: 100%;
    height: 100%;
    background-color: rgb(255, 255, 255);
}
.header{
  background-color: rgb(255, 255, 255);
  width: 100%;
  height: 8%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
